<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->

<template>
  <div class="user-info">
    <el-row :span="24">
      <el-col :span="4">
        <basic-container>
          <div class="user-info__content">
            <img class="user-info__img"
                 :src="form.avatar"
                 alt="" />
            <p class="user-info__name">{{form.nickName}}</p>


<!--            <router-link class="user-info__setting"-->
<!--                         :to="{path:'/info/setting'}">个人设置</router-link>-->
            <p class="user-info__desc">{{form.ms}}</p>
            <div class="user-info__detail-desc">
              <p><i class="el-icon-message"></i><span>{{form.email||"待设置"}}</span></p>
              <p><i class="el-icon-postcard"></i><span>{{form.phone}} </span></p>
              <p><i class="el-icon-location-information"></i><span>{{form.roleName}}</span></p>
            </div>
            <div class="user-info__divider"></div>
            <h4>标签</h4>
            <div class="user-info__tags">
              <el-tag effect="plain"
                      v-for="(tag,index) in tags"
                      :key="index">
                {{tag}}
              </el-tag>
            </div>

          </div>
        </basic-container>
      </el-col>
      <el-col :span="20">
        <basic-container>
          <el-tabs v-model="activeName">
            <el-tab-pane label="个人信息"
                                        name="tab0">
            <el-form ref="form1"  :rules="formRules"  label-width="110px">
              <el-form-item label="头像">
                <el-upload class="avatar-uploader"
                           :show-file-list="false">
                  <img v-if="form.avatar"
                       :src="form.avatar"
                       class="avatar">
                  <i v-else
                     class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="form.nickName"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                  <el-radio-group v-model="form.sex">
                      <el-radio v-for="dict in $dictObject.sex" :key="dict.value"
                                :label="dict.value">{{ dict.label }}
                      </el-radio>
                  </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"   @click="updataBaisc">确认</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
            <el-tab-pane label="修改密码"
                         name="tab1">
              <el-form ref="form2"  :rules="formRules"  label-width="110px">
                <el-form-item label="原密码"
                              prop="password">
                  <el-input type="password"
                            v-model="form.password"
                            autocomplete="new-password"></el-input>
                </el-form-item>
                <el-form-item label="新密码"
                              prop="newpassword1">
                  <el-input type="password"
                            v-model="form.newpassword1"
                            autocomplete="new-password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码"
                              prop="newpassword2">
                  <el-input type="password"
                            v-model="form.newpassword2"
                            autocomplete="new-password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"   @click="updatePassword">确认</el-button>
                  <el-button>重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="安全设置">
              <div class="user-setting__main">
                <div class="user-setting__title">安全设置</div>

                <div class="user-setting__item">
                  <div class="user-setting__meta">
                    <p class="title">
                      <i class="icon-shoujirenzheng"></i>
                      绑定手机
                    </p>
                    <p class="subtitle">设置您的绑定手机号码</p>
                  </div>
                  <div class="user-setting__menu">
                    <el-button>修改</el-button>
                  </div>
                </div>
                <div class="user-setting__item">
                  <div class="user-setting__meta">
                    <p class="title">
                      <i class="icon-web__youxiangrenzheng"></i>
                      绑定邮箱
                    </p>
                    <p class="subtitle">设置您的绑定邮箱</p>
                  </div>
                  <div class="user-setting__menu">
                    <el-button>修改</el-button>
                  </div>
                </div>
              </div>

            </el-tab-pane>
<!--            <el-tab-pane label="通知设置">-->
<!--              <div class="user-setting__main">-->
<!--                <div class="user-setting__title">通知设置</div>-->
<!--                <div class="user-setting__item">-->
<!--                  <div class="user-setting__meta">-->
<!--                    <p class="title">-->
<!--                      <i class="el-icon-document"></i>-->
<!--                      系统消息-->
<!--                    </p>-->
<!--                    <p class="subtitle">系统性的通知或者更新消息</p>-->
<!--                  </div>-->
<!--                  <div class="user-setting__menu">-->
<!--                    <el-switch v-model="value">-->
<!--                    </el-switch>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="user-setting__item">-->
<!--                  <div class="user-setting__meta">-->
<!--                    <p class="title">-->
<!--                      <i class="el-icon-user"></i>-->
<!--                      帐号消息-->
<!--                    </p>-->
<!--                    <p class="subtitle">帐号变更的通知消息</p>-->
<!--                  </div>-->
<!--                  <div class="user-setting__menu">-->
<!--                    <el-switch v-model="value">-->
<!--                    </el-switch>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </el-tab-pane>-->

          </el-tabs>
        </basic-container>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { openWindow} from "@/framework-core/utils/util";
  import {isValidateNoneMobile} from "@/framework-core/utils/validate";
  import {updatePassword, updateBasic,getUser} from '@/framework-core/api/user'

  export default {
    data() {
      const validatePhone = (rule, value, callback) => {
        if (isValidateNoneMobile(value)[0]) {
          callback(new Error(isValidateNoneMobile(value)[1]));
        } else {
          callback();
        }
      };
      const validatePass = (rule, value, callback) => {
        if (this.form.newpassword1 !== "") {
          if (this.form.newpassword2 != this.form.newpassword1) {
            callback(new Error("两次输入密码不一致!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      return {
        activeName:"tab0",
        avatarUrl: "",
        // headers: {
        //   Authorization: store.getters.access_token,
        // },
        form: {
          username: "",
          password: "",
          newpassword1: "",
          newpassword2: "",
          avatar: "",
          phone: "",
          nickname:"",
          name:"",
          email:""
        },
        formRules: {
          phone: [{required: false, validator: validatePhone, trigger: "blur"}],
          // password: [
          //   {
          //     required: true,
          //     min: 5,
          //     message: "原密码不少于6位",
          //     trigger: "blur",
          //   },
          // ],
          // newpassword1: [
          //   {
          //     required: true,
          //     min: 5,
          //     message: "新密码不少于6位",
          //     trigger: "blur",
          //   },
          // ],
          newpassword2: [
            {required: true, validator: validatePass, trigger: "blur"},
          ],
        },
      };
    },
    created() {
       // this.resetForm();
        getUser().then((res) => {
            this.form = res.data.data.data;
        }).catch(() => {
        });
    },
    computed: {
      ...mapState({
        userInfo: (state) => state.user.userInfo,
      }),
    },
    methods: {
      submitForm2() {
        this.$refs["form2"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.$message.success("editInfo");
          // editInfo(this.form).then((response) => {
          //   this.$notify.success("修改成功");
          //   // 修改后注销当前token,重新登录
          //   this.$store.dispatch("LogOut").then(() => {
          //     location.reload();
          //   });
          // });
        });
      },
      updataBaisc(){

        updateBasic( this.form).then(() => {
          this.$message.success('修改成功')
        }).catch(() => {
        });

      },
      updatePassword() {
        // this.$refs["form2"].validate((valid) => {
        //   if (!valid) {
        //     return false;
        //   }
        //
          // editInfo(this.form).then((response) => {
          //   this.$notify.success("修改成功");
          //   // 修改后注销当前token,重新登录
          //   this.$store.dispatch("LogOut").then(() => {
          //     location.reload();
          //   });
          // });
        // });

       if(!this.form.newpassword1 ||this.form.newpassword1 .length<6 ) {
         this.$message.error('新密码要求6位以上')
         return
       }
        if(this.form.newpassword1!=this.form.newpassword2) {
          this.$message.error('确认密码不一致')
          return
        }
        updatePassword(this.form.password, this.form.newpassword2).then((res) => {
          if(res.data.success){
            this.$message.success("修改成功")
          }else{
            this.$message.error(res.data.message);
          }

        }).catch(() => {
        });

      },

      resetForm() {
        this.form.password = "";
        this.form.newpassword1 = "";
        this.form.newpassword2 = "";
        this.form.username = this.userInfo.username;
        this.form.phone = this.userInfo.phone;

        this.form.avatar = this.userInfo.avatar||'https://avatar.gitee.com/uploads/61/632261_smallweigit.jpg!avatar100?1518660401';
        this.form.nickName = this.userInfo.displayName;
        this.form.name = this.userInfo.name
        this.form.email = this.userInfo.exp.email;
        if(this.userInfo.roles){
          this.form.roleName =this.userInfo.roles[0].roleName;
        }
        // handleImg(this.userInfo.avatar, "avatar");
        //  //判断是否选择了租户ID
        //  const TENANT_ID = getStore({name: "tenantId"});
        //  if (TENANT_ID) {
        //    this.headers["TENANT-ID"] = TENANT_ID; // 租户ID
        //  }
      },
      handleAvatarSuccess(res, file) {
        this.avatarUrl = URL.createObjectURL(file.raw);
        this.form.avatar = res.data.url;
      },
      handleClick(thirdpart) {
       var  redirect_uri = encodeURIComponent(
                window.location.origin + "/#/authredirect"
        );
       var url = ""
        // if (thirdpart === "wechat") {
        //   appid = "wxd1678d3f83b1d83a";
        //   url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect`;
        // } else if (thirdpart === "tencent") {
        //   client_id = "101322838";
        //   url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
        // } else if (thirdpart === "gitee") {
        //   client_id =
        //     "235ce26bbc59565b82c989aa3a407ce844cf59a7c5e0f9caa9bb3bf32cee5952";
        //   url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
        // } else if (thirdpart === "osc") {
        //   client_id = "neIIqlwGsjsfsA6uxNqD";
        //   url = `https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=${client_id}&state=OSC-BIND&redirect_uri=${redirect_uri}`;
        // }
        openWindow(url, thirdpart, 540, 540);
      },
    },
  };
</script>

<style lang="scss">
  .user-info {
    .avue-tabs {
      padding: 0 10px;
    }
    .el-tabs__content {
      padding: 20px 0;
    }
    &__img {
      display: block;
      margin: 0 auto;
      border-radius: 100%;
      width: 100px;
      height: 100px;
    }
    &__name {
      text-align: center;
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 0;
      margin-top: 10px;
    }
    &__setting {
      margin-bottom: 12px;
      display: block;
      font-size: 12px;
      color: #409eff;
      text-align: center;
    }
    &__desc {
      text-align: center;
      width: 200px;
      margin: 0 auto;
    }
    &__detail-desc {
      margin-top: 50px;
      font-size: 14px;
      p {
        margin-bottom: 10px;
      }
      span {
        margin-left: 10px;
      }
    }
    &__divider {
      border-top: 1px dashed #e8e8e8;
      display: block;
      height: 0;
      width: 100%;
      margin: 24px 0;
      clear: both;
    }
    &__tags {
      .el-tag {
        margin: 0 5px 5px 0;
      }
    }
    &__meta {
      flex: 1;
      .title {
        margin: 6px 0;
        font-weight: 700;
        font-size: 14px;
      }
      .subtitle {
        margin: 8px 0;
        font-size: 14px;
        color: #555;
      }
    }


    .user-setting {
      &__main {
        padding: 8px 40px;
      }
      &__item {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
      }
      &__title {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 28px;
        font-weight: 500;
        margin-bottom: 12px;
      }
      &__meta {
        flex: 1;
        .title {
          margin: 6px 0;
          font-weight: 700;
          font-size: 14px;
        }
        .subtitle {
          margin: 8px 0;
          font-size: 14px;
          color: #555;
        }
      }
    }
  }
</style>
